<!-- 个人中心页面 -->
<template>
  <div class="profile">
    <!-- 头部 -->
    <header class="header">
      <div class="title">个人中心</div>
      <van-icon name="setting" size="20" @click="onSettingClick" />
    </header>

    <!-- 用户信息卡片 -->
    <div class="user-card">
      <div class="user-info">
        <van-image
          round
          width="60"
          height="60"
          :src="userInfo.avatar"
        />
        <div class="info">
          <div class="name">{{ userInfo.username }}</div>
          <div class="tag">
            <van-tag type="success">{{ userInfo.role === 'farmer'? '优质农户' : '村集体' }}</van-tag>
            <span class="id">编号: {{ userInfo.id }}</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 订单和商品统计 -->
    <div class="stats">
      <div class="stat-item">
        <van-icon name="orders-o" size="24" />
        <div class="content">
          <div class="label">我的订单</div>
        </div>
      </div>
      <div class="stat-item" @click="onProductClick">
        <van-icon name="shop-o" size="24" />
        <div class="content">
          <div class="label">农产品上架</div>
        </div>
      </div>
    </div>

    <!-- 订单状态 -->
    <div class="order-status">
      <div class="status-item" v-for="(count, status) in userInfo.orders" :key="status" @click="onOrderStatusClick(status)">
        <van-badge :content="count" :max="99">
          <van-icon :name="getOrderStatusIcon(status)" size="24" />
        </van-badge>
        <span>{{ getOrderStatusText(status) }}</span>
      </div>
    </div>

    <!-- 我的服务 -->
    <div class="services">
      <div class="title">我的服务</div>
      <div class="service-grid">
        <div 
          class="service-item" 
          v-for="service in userInfo.services" 
          :key="service.type"
          @click="onServiceClick(service)"
        >
          <van-badge :content="service.count" :max="99" v-if="service.count">
            <van-icon :name="service.icon" :color="service.color" size="24" />
          </van-badge>
          <van-icon v-else :name="service.icon" :color="service.color" size="24" />
          <span>{{ service.text }}</span>
        </div>
      </div>
    </div>

    <!-- 底部导航栏 -->
    <TabBar />
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { showToast } from 'vant'
import TabBar from '@/components/TabBar.vue'
import api from '@/api'
import defaultAvatar from '@/assets/img/defaultavatar.jpg' // 在顶部导入图片
const router = useRouter()
const userInfo = ref({
  id: '123456',
  username: '示例用户',
  role: 'farmer',
  avatar: defaultAvatar,
  stats: {
    pendingOrders: 5,
    onSaleProducts: 10
  },
  orders: {
    pending: 2,
    shipping: 3,
    receiving: 1,
    comment: 0
  },
  services: [
    {
      type: 'medical',
      icon: 'medal',
      color:'red',
      count: 0,
      text: '医疗服务'
    },
    {
      type: 'points',
      icon: 'balance-list',
      color: 'blue',
      count: 5,
      text: '积分服务'
    },
    {
      type: 'welfare',
      icon: 'gift',
      color: 'green',
      count: 0,
      text: '福利服务'
    },
    {
      type:'service',
      icon:'service',
      color: 'orange',
      count: 2,
      text: '其他服务'
    }
  ]
})
// 点击农产品上架
const onProductClick = () => {
  router.push('/product-listing') // 跳转到农产品上架页面
}
// 获取用户信息
const getUserInfo = async () => {
  try {
    const res = await api.user.getInfo()
    if (res.code === 0) {
      userInfo.value.id = res.data.id
      userInfo.value.username = res.data.username
    } else {
      showToast('获取用户信息失败')
    }
  } catch (error) {
    console.error('获取用户信息失败:', error)
    showToast('获取用户信息失败')
  }
}
// 获取订单状态图标
const getOrderStatusIcon = (status) => {
  const iconMap = {
    pending: 'clock',
    shipping: 'logistics',
    receiving: 'gift-o',
    comment: 'comment'
  };
  return iconMap[status] || 'question';
};

// 获取订单状态文本
const getOrderStatusText = (status) => {
  const textMap = {
    pending: '待付款',
    shipping: '待发货',
    receiving: '待收货',
    comment: '待评价'
  };
  return textMap[status] || '未知状态';
};

// 点击订单状态
const onOrderStatusClick = (status) => {
  router.push({
    path: '/orders',
    query: { status }
  });
};

// 点击服务
const onServiceClick = (service) => {
  const routeMap = {
    medical: '/medical',
    points: '/points',
    welfare: '/welfare',
    service: '/service'
  };
  if (routeMap[service.type]) {
    router.push(routeMap[service.type]);
  }
};

// 设置按钮点击事件
const onSettingClick = () => {
  router.push('/settings');
};

onMounted(() => {
  // 这里原本获取用户信息的逻辑去掉，因为使用假数据模拟
  getUserInfo();
});
</script>

<style lang="scss" scoped>
.profile {
  min-height: 100vh;
  background-color: #f7f8fa;
  padding-bottom: 50px;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px;
  background-color: #4fc08d;
  color: #fff;

  .title {
    font-size: 18px;
    font-weight: bold;
  }
}

.user-card {
  margin: 16px;
  padding: 16px;
  background-color: #fff;
  border-radius: 8px;

  .user-info {
    display: flex;
    align-items: center;

    .info {
      margin-left: 16px;

      .name {
        font-size: 18px;
        font-weight: bold;
        color: #323233;
        margin-bottom: 4px;
      }

      .tag {
        display: flex;
        align-items: center;
        gap: 8px;

        .id {
          font-size: 12px;
          color: #969799;
        }
      }
    }
  }
}

.stats {
  margin: 0 16px 16px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;

  .stat-item {
    display: flex;
    align-items: center;
    padding: 16px;
    background: #fff;
    border-radius: 8px;

    .content {
      margin-left: 12px;

      .label {
        font-size: 14px;
        color: #323233;
        margin-bottom: 4px;
      }

      .value {
        font-size: 12px;
        color: #969799;
      }
    }
  }
}

.order-status {
  margin: 0 16px 16px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  .status-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;

    span {
      font-size: 12px;
      color: #323233;
    }
  }
}

.services {
  margin: 0 16px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;

  .title {
    font-size: 16px;
    font-weight: bold;
    color: #323233;
    margin-bottom: 16px;
  }

  .service-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;

    .service-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;

      span {
        font-size: 12px;
        color: #323233;
      }
    }
  }
}
</style>